{* Extend our master template *}
{extends file="master.tpl"}

{* This block is defined in the master.php template *}
{block name=content}
    <div class="row">

	    <div class="col-sm-6 col-md-3">
	      <div class="panel panel-success panel-stat">
	        <div class="panel-heading">

	          <div class="stat">
	            <div class="row">
	              <div class="col-xs-4">
	              	{image('is-user.png')}
	            </div>
	            <div class="col-xs-8">
	                <small class="stat-label">Visits Today</small>
	                <h1>900k+</h1>
	            </div>
	        </div><!-- row -->

	        <div class="mb15"></div>

	        <div class="row">
	          <div class="col-xs-6">
	            <small class="stat-label">Pages / Visit</small>
	            <h4>7.80</h4>
	        </div>

	        <div class="col-xs-6">
	            <small class="stat-label">% New Visits</small>
	            <h4>76.43%</h4>
	        </div>
	    </div><!-- row -->
	</div><!-- stat -->

	</div><!-- panel-heading -->
	</div><!-- panel -->
	</div><!-- col-sm-6 -->

	<div class="col-sm-6 col-md-3">
	  <div class="panel panel-danger panel-stat">
	    <div class="panel-heading">

	      <div class="stat">
	        <div class="row">
	          <div class="col-xs-4">
	          	{image('is-document.png')}
	        </div>
	        <div class="col-xs-8">
	            <small class="stat-label">% Unique Visitors</small>
	            <h1>54.40%</h1>
	        </div>
	    </div><!-- row -->

	    <div class="mb15"></div>

	    <small class="stat-label">Avg. Visit Duration</small>
	    <h4>01:80:22</h4>

	</div><!-- stat -->

	</div><!-- panel-heading -->
	</div><!-- panel -->
	</div><!-- col-sm-6 -->

	<div class="col-sm-6 col-md-3">
	  <div class="panel panel-primary panel-stat">
	    <div class="panel-heading">

	      <div class="stat">
	        <div class="row">
	          <div class="col-xs-4">
	          	{image('is-document.png')}
	        </div>
	        <div class="col-xs-8">
	            <small class="stat-label">Page Views</small>
	            <h1>300k+</h1>
	        </div>
	    </div><!-- row -->

	    <div class="mb15"></div>

	    <small class="stat-label">% Bounce Rate</small>
	    <h4>34.23%</h4>

	</div><!-- stat -->

	</div><!-- panel-heading -->
	</div><!-- panel -->
	</div><!-- col-sm-6 -->

	<div class="col-sm-6 col-md-3">
	  <div class="panel panel-dark panel-stat">
	    <div class="panel-heading">

	      <div class="stat">
	        <div class="row">
	          <div class="col-xs-4">
	          	{image('is-money.png')}
	        </div>
	        <div class="col-xs-8">
	            <small class="stat-label">Today's Earnings</small>
	            <h1>$655</h1>
	        </div>
	    </div><!-- row -->

	    <div class="mb15"></div>

	    <div class="row">
	      <div class="col-xs-6">
	        <small class="stat-label">Last Week</small>
	        <h4>$32,322</h4>
	    </div>

	    <div class="col-xs-6">
	        <small class="stat-label">Last Month</small>
	        <h4>$503,000</h4>
	    </div>
	</div><!-- row -->

	</div><!-- stat -->

	</div><!-- panel-heading -->
	</div><!-- panel -->
	</div><!-- col-sm-6 -->
	</div><!-- row -->

	<div class="row">
	    <div class="col-sm-8 col-md-9">
	      <div class="panel panel-default">
	        <div class="panel-body">
	          <div class="row">
	            <div class="col-sm-12">
	              <h5 class="subtitle mb5">Network Performance</h5>
	              <p class="mb15">Duis autem vel eum iriure dolor in hendrerit in vulputate...</p>
	              <div id="basicflot" style="width: 100%; height: 300px; margin-bottom: 20px"></div>
	          </div><!-- col-sm-8 -->
	    </div><!-- row -->
	</div><!-- panel-body -->
	</div><!-- panel -->
	</div><!-- col-sm-9 -->

	<div class="col-sm-4 col-md-3">

	  <div class="panel panel-default">
	    <div class="panel-body">
	        <h5 class="subtitle mb5">Most Browser Used</h5>
	        <p class="mb15">Duis autem vel eum iriure dolor in hendrerit in vulputate...</p>
	        <div id="donut-chart2" style="text-align: center; height: 298px;"></div>
	    </div><!-- panel-body -->
	</div><!-- panel -->

	</div><!-- col-sm-3 -->

	</div><!-- row -->

	<div class="row">

	    <div class="col-sm-12">

	      <div class="panel panel-success">
	        <div class="panel-heading padding5">
	          <div id="line-chart" style="height: 248px;"></div>
	      </div>
	      <div class="panel-body">
	          <div class="tinystat pull-left">
	            <div id="sparkline" class="chart mt5"></div>
	            <div class="datainfo">
	              <span class="text-muted">Average Sales</span>
	              <h4>$630,201</h4>
	          </div>
	      </div><!-- tinystat -->
	      <div class="tinystat pull-right">
	        <div id="sparkline2" class="chart mt5"></div>
	        <div class="datainfo">
	          <span class="text-muted">Total Sales</span>
	          <h4>$139,201</h4>
	      </div>
	  </div><!-- tinystat -->
	</div>
	</div><!-- panel -->

	</div><!-- col-sm-6 -->
	</div><!-- row -->
{/block}